<template>
  <div class="singer-album">
    <div class="album-slide">
      <div class="singer-img">
        <img :src="attachImageUrl(singer.pic)">
      </div>
      <ul class="info">
        <li v-if="singer.sex==0||singer.sex==1">{{ attachSex(singer.sex) }}</li>
        <li>生日：{{ singer.birth }}</li>
        <li>故乡：{{ singer.location }}</li>
      </ul>
    </div>
    <div class="album-content">
      <div class="intro">
        <h2>{{ singer.name }}</h2>
        <span>{{ singer.introduction }}</span>
      </div>
      <div class="content">
        <album-content :songList="listOfSongs">
          <template slot="title">歌单</template>
        </album-content>
      </div>
    </div>
  </div>
</template>
<script>
import {mixin} from '../../mixins';
import {mapGetters} from 'vuex';
import AlbumContent from "@/views/components/AlbumContent";

export default {
  name: 'singer-album',
  mixins: [mixin],
  components: {
    AlbumContent
  },
  data() {
    return {
      singerId: '',       //前面传来的歌手id
      singer: {},         //当前歌手信息
      listOfSongs: [],
    }
  },
  computed: {
    ...mapGetters([
      'tempList',         //当前歌手对象
      'loginIn',          //用户是否已登录
      'userId',           //当前登录用户id
    ])
  },
  created() {
    this.singerId = this.$route.params.id;
    // this.singer = this.tempList;
    this.getSongOfSingerId();
  },
  methods: {
    //根据歌手id查询歌曲
    getSongOfSingerId() {
      let res = {
        id: '1',
        pic: '/profile/upload/2023/02/21/nizhan.jpg',
        sex: 1,
        birth: '1994-11-12',
        location: '河南省 郑州市',
        name: '周杰伦',
        introduction: '介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍',
      }
      this.listOfSongs = [
        {
          name: '逆战',
          id: 1,
          url: '/profile/upload/2023/02/21/zjlqt.mp3',
          pic: '/profile/upload/2023/02/21/nizhan.jpg',
          lyric: '[ti:仰望星空]\n' +
            '[ar:张杰]\n' +
            '[00:00.266]\n' +
            '[00:00.570]作曲：曾明维（Taiwan）\n' +
            '[00:00.670]作词 : 邹振东\n' +
            '[00:00.770]这一天我开始仰望星空发现\n' +
            '[00:07.238]星并不远梦并不远只要你踮起脚尖\n' +
            '[00:17.11]我相信有一双手把我轻轻牵到你的跟前\n' +
            '[00:29.233]我相信有一根线将梦想与现实相连\n' +
            '[00:45.389]我相信有一种缘会把所有的偶然都实现\n' +
            '[00:57.346]我相信就是这一天命运开始改变\n' +
            '[01:08.85]这一天我开始仰望星空发现\n' +
            '[01:14.559]星并不远梦并不远只要你踮起脚尖\n' +
            '[01:22.154]我从此不再彷徨也不再腼腆\n' +
            '[01:28.621]张开双臂和你一起飞的更高看的更远\n' +
            '[01:41.286]Music\n' +
            '[01:52.845]我相信有一种缘会把所有的偶然都实现\n' +
            '[02:04.543]我相信就是这一天命运开始改变\n' +
            '[02:15.135]这一天我开始仰望星空发现\n' +
            '[02:21.668]星并不远梦并不远只要你踮起脚尖\n' +
            '[02:29.235]我从此不再彷徨也不再腼腆\n' +
            '[02:35.717]张开双臂和你一起飞的更高看的更远\n' +
            '[02:48.45]开始仰望星空感觉爱的时间空间\n' +
            '[02:55.353]寻找生命中最灿烂的亮点\n' +
            '[03:01.278]这一天我开始仰望星空发现\n' +
            '[03:07.439]星并不远梦并不远只要你踮起脚尖\n' +
            '[03:14.888]我从此不再彷徨也不再腼腆\n' +
            '[03:21.630]张开双臂和你一起飞的更高看的更远\n' +
            '[03:29.404]这一天我开始仰望星空发现\n' +
            '[03:35.634]星并不远梦并不远只要你踮起脚尖\n' +
            '[03:43.477]我从此不再彷徨也不再腼腆\n' +
            '[03:49.834]张开双臂和你一起飞的更高看的更远\n' +
            '[04:02.854]',
          introduction: '专辑1'
        },
        {
          name: '逆战01',
          id: 2,
          url: '/profile/upload/2023/02/21/zjlyhle.mp3',
          pic: '/profile/upload/2023/02/21/nizhan.jpg',
          lyric: '[ti:仰望星空]\n' +
            '[ar:张杰]\n' +
            '[00:00.266]\n' +
            '[00:00.570]作曲：曾明维（Taiwan）\n' +
            '[00:00.670]作词 : 邹振东\n' +
            '[00:00.770]这一天我开始仰望星空发现\n' +
            '[00:07.238]星并不远梦并不远只要你踮起脚尖\n' +
            '[00:17.11]我相信有一双手把我轻轻牵到你的跟前\n' +
            '[00:29.233]我相信有一根线将梦想与现实相连\n' +
            '[00:45.389]我相信有一种缘会把所有的偶然都实现\n' +
            '[00:57.346]我相信就是这一天命运开始改变\n' +
            '[01:08.85]这一天我开始仰望星空发现\n' +
            '[01:14.559]星并不远梦并不远只要你踮起脚尖\n' +
            '[01:22.154]我从此不再彷徨也不再腼腆\n' +
            '[01:28.621]张开双臂和你一起飞的更高看的更远\n' +
            '[01:41.286]Music\n' +
            '[01:52.845]我相信有一种缘会把所有的偶然都实现\n' +
            '[02:04.543]我相信就是这一天命运开始改变\n' +
            '[02:15.135]这一天我开始仰望星空发现\n' +
            '[02:21.668]星并不远梦并不远只要你踮起脚尖\n' +
            '[02:29.235]我从此不再彷徨也不再腼腆\n' +
            '[02:35.717]张开双臂和你一起飞的更高看的更远\n' +
            '[02:48.45]开始仰望星空感觉爱的时间空间\n' +
            '[02:55.353]寻找生命中最灿烂的亮点\n' +
            '[03:01.278]这一天我开始仰望星空发现\n' +
            '[03:07.439]星并不远梦并不远只要你踮起脚尖\n' +
            '[03:14.888]我从此不再彷徨也不再腼腆\n' +
            '[03:21.630]张开双臂和你一起飞的更高看的更远\n' +
            '[03:29.404]这一天我开始仰望星空发现\n' +
            '[03:35.634]星并不远梦并不远只要你踮起脚尖\n' +
            '[03:43.477]我从此不再彷徨也不再腼腆\n' +
            '[03:49.834]张开双臂和你一起飞的更高看的更远\n' +
            '[04:02.854]',
          introduction: '专辑2'
        },
      ]
      this.singer = res;
      this.$store.commit('setListOfSongs', this.listOfSongs);
      //this.$store.commit('setListOfSongs', res);
      /*songOfSingerId(this.singerId)
        .then(res => {
          this.$store.commit('setListOfSongs', res);
        })
        .catch(err => {
          console.log(err)
        })*/
    },
    //获取性别
    attachSex(value) {
      if (value == 0) {
        return '女'
      } else if (value == 1) {
        return '男'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/singer-album.scss';
</style>
